.vision {
  width: 200px;
  height: 200px;
  margin: 200px auto;
  background: url(../images/jirx.jpg);
  background-size: 100% 100%;
  /* background: #fcc00f; */
  /* 单侧阴影 */
  /* box-shadow: 0 5px 4px -4px black; */
  /* 相邻两侧阴影(第四个参数用来控制四边阴影的伸缩) */
  /* box-shadow: 3px 3px 6px -3px black; */
  /* 相对两侧阴影 */
  /* box-shadow: 5px 0 5px -5px black,
 -5px 0 5px -5px black; */

  /* filter会给任何非透明的部分都打上投影 */
  /* font-size: 30px;
  border: 1px solid #000000;
  filter: url(drop-shadow.svg#drop-shadow);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 1)); */

  /* text-shadow属性产生的文字阴影不会影响filter的阴影 */
  /* color: deeppink;
  border: 2px solid;
  text-shadow: 0.1em 0.2em yellow;
  filter: drop-shadow(0.05em 0.05em 0.1em gray); */

  /* 加滤镜， 一般是图片路径*/
  /* filter: sepia(1) saturate(4) hue-rotate(295deg); */
  /* 滤镜动画*/
  transition: 0.5s filter;
  filter: sepia(1) saturate(4) hue-rotate(295deg);
}
.vision:hover,
.vision:focus {
  filter: none;
}
